<template>
  <div class="bottom-tab">
    <span class="tab-item" @click="switchTo('/home')">
      <img :src="$route.path.includes('/home')?tabBarImgArr[0].selected:tabBarImgArr[0].normal" alt="">
      <span :class="{on:$route.path.includes('/home')}">首页</span>
    </span>
    <span class="tab-item" @click="switchTo('/recommend')">
      <img :src="$route.path.includes('/recommend')?tabBarImgArr[1].selected:tabBarImgArr[1].normal" alt="">
      <span :class="{on:$route.path.includes('/recommend')}">推荐</span>
    </span>
    <span class="tab-item" @click="switchTo('/search')">
      <img :src="$route.path.includes('/search')?tabBarImgArr[2].selected:tabBarImgArr[2].normal" alt="">
      <span :class="{on:$route.path.includes('/search')}">搜索</span>
    </span>
    <span class="tab-item" @click="switchTo('/chat')">
      <img :src="$route.path.includes('/chat')?tabBarImgArr[3].selected:tabBarImgArr[3].normal" alt="">
      <span :class="{on:$route.path.includes('/chat')}">聊天</span>
    </span>
    <span class="tab-item" @click="switchTo('/me')">
      <img :src="$route.path.includes('/me')?tabBarImgArr[4].selected:tabBarImgArr[4].normal" alt="">
      <span :class="{on:$route.path.includes('/me')}">我的</span>
    </span>
  </div>
</template>

<script>
export default {
  name:"TabBar",
  data(){
    return{
      tabBarImgArr:[
        {
          normal:require('./../../../static/img/首页未选中.png'),
          selected:require('./../../../static/img/首页选中.png')
        },
        {
          normal:require('./../../../static/img/推荐未选中.png'),
          selected:require('./../../../static/img/推荐选中.png')
        },
        {
          normal:require('./../../../static/img/搜索未选中.png'),
          selected:require('./../../../static/img/搜索选中.png')
        },
        {
          normal:require('./../../../static/img/聊天未选中.png'),
          selected:require('./../../../static/img/聊天选中.png')
        },
        {
          normal:require('./../../../static/img/个人中心未选中.png'),
          selected:require('./../../../static/img/个人中心选中.png')
        }
      ]
    }
  },
  methods:{
    switchTo(path){
      this.$router.push({path}).catch(data=>{});
    }
  }
}
</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
.bottom-tab
  width 100%
  height 50px
  background-color #fff
  position fixed
  left 0
  bottom 0
  display flex
  z-index 999
  .tab-item
    display flex
    flex 1
    flex-direction column
    align-items center
    justify-content center
    font-size 14px
    color #666
    img
      width 35%
      margin-bottom 2px
    .on
      color red
</style>
